<template>
	<!-- 部门执勤详情页 -->
	<view>
		<u-navbar back-icon-color="#fff" :is-back="true" :border-bottom="false" :title="navbarTitle+'执勤表'"
			title-color="#fff" :title-size="40">
		</u-navbar>
		<view class="table">
			<u-table>
				<u-tr>
					<u-th>日期</u-th>
					<u-th>负责人</u-th>
					<u-th>手机号</u-th>
					<u-th>执勤学生</u-th>
				</u-tr>
				<u-tr v-for="(item,index) in onDuty" :key="index">
					<u-td>{{item.duty_time.slice(5,10)}}</u-td>
					<u-td>{{item.duty_teacher}}</u-td>
					<u-td>
						<view @click="callPhoneNumber(item.tea_phone)">{{item.tea_phone}}</view>
					</u-td>
					<u-td>{{item.duty_stu}}</u-td>
				</u-tr>
			</u-table>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navbarTitle: "", //自定义顶部标题
				onDuty: [], //执勤表信息
			}
		},
		methods: {
			callPhoneNumber(item) { //部门执勤 - 拨打电话
				uni.makePhoneCall({
					phoneNumber: item
				})
			},
		},
		onLoad(e) {
			this.onDuty = this.$store.state.departmentDuty.daty_data_list
			this.navbarTitle = e.title
		}
	}
</script>

<style>
	.table {
		padding: 20rpx;
	}

	u-tr u-th,
	u-tr u-td {
		flex: initial;
	}

	u-tr u-th:nth-child(1),
	u-tr u-td:nth-child(1) {
		/* 日期 */
		width: 17%;
	}

	u-tr u-th:nth-child(2),
	u-tr u-td:nth-child(2) {
		/* 负责人 */
		width: 22%;
	}

	u-tr u-th:nth-child(3),
	u-tr u-td:nth-child(3) {
		/* 手机号 */
		width: 31%;
	}

	u-tr u-th:nth-child(4),
	u-tr u-td:nth-child(4) {
		/* 校区 */
		width: 30%;
	}

	u-td>view {
		line-height: 50rpx;
	}
</style>
